<!--
 * @Date: 2022-06-29 14:10:31
 * @LastEditTime: 2022-06-29 14:44:58
-->
<template>
  <div id="js-main">
    <div id="js-name">{{name}}</div>
    <div id="js-ul-wrapper">
      <ul>
        <li class="js-desc">desc1: {{desc1}}</li>
        <li class="js-desc">desc2: {{desc2}}</li>
      </ul>
    </div>
    <button @click="changeDesc">点击我可以修改desc1的值</button>
  </div>
</template>

<script>
export default {
  name: 'JiangshuoComponents',
  data: () => {
    return {
      name: '蒋硕',
      desc1: '这是一段描述', // 这个地方的值可以动态变化，可以通过改变这个值为接口请求获取信息并展示
      desc2: '通过这个变量值的改变可以进行页面渲染的修改', // 这个地方的值可以动态变化，可以通过改变这个值为接口请求获取信息并展示
      state: 1
    }
  },
  methods: {
    changeDesc: function () {
      this.desc1 = (this.state === 1) ? '通过函数' : '也可以动态改变这个值'
      this.state = -this.state
    }
  }
}
</script>

<style>
#js-main {
  width: 400px;
  height: 200px;
  background: #ffff;
  border: 1px solid black;
}
</style>
